<!--新页面模板-->
<template>
  <!--  风险点评估-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>
          <!-- 条件筛选 -->
          <div class="page_filter">
            <el-autocomplete
              v-model="state"
              clearable
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入路线名称或编号"
              @change="handleChange"
              @select="handleSelect"
            ></el-autocomplete>
<!--            <el-select v-model="form.roadId" filterable clearable placeholder="选择路线" @change="changeRoad">-->
<!--              <el-option-->
<!--                v-for="item in deptRoadList"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id">-->
<!--              </el-option>-->
<!--            </el-select>-->
            <el-select v-model="form.slopeId" filterable clearable placeholder="选择边坡">
              <el-option
                v-for="item in slopeSelectList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="form.riskLevel" clearable placeholder="风险等级">
              <el-option
                v-for="item in EnumSlopeRiskLevelList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
          </div>
          <div class="page_main">
            <el-button class=" common_btn-defalut" style="margin-bottom: 20px" @click="add"  >边坡工程评分调查表</el-button>

<!--            <el-button class=" common_btn-defalut" style="margin-bottom: 20px" @click="add"  :disabled="hasPermission('slope:risk:add')?false:'disabled'">边坡工程评分调查表</el-button>-->
            <el-radio-group v-model="form.isQueryHistory" @change="form.page=1;queryList()">
              <el-radio-button v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <el-table :data="tableList" border>
              <el-table-column label="序号" width="70">
                <template slot-scope="scope">
                  {{getIndex(scope.$index)}}
                </template>
              </el-table-column>
              <!--              <el-table-column prop="roadCode" width="100" label="路线编号"></el-table-column>-->
              <el-table-column prop="roadName" show-overflow-tooltip width="120" label="路线名称"></el-table-column>
              <el-table-column prop="deptName" show-overflow-tooltip width="150" label="管养单位"></el-table-column>
              <el-table-column prop="slopeNo" show-overflow-tooltip min-width="160" label="边坡编号"></el-table-column>
              <el-table-column prop="name" show-overflow-tooltip min-width="120" label="边坡名称"></el-table-column>
              <el-table-column prop="riskLevelName" min-width="120" label="评估等级1">
                <template slot-scope="scope">
                  <el-tag size="mini" :style="scope.row.riskLevel| gradeDangerColorSlope"
                          style="color: white">
                    {{scope.row.riskLevelName}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="investigator" min-width="100" show-overflow-tooltip label="调查人员"></el-table-column>
              <el-table-column prop="investigateTime" width="120" label="调查">
                <template slot-scope="scope">{{scope.row.createTime | formatTimer2}}</template>
              </el-table-column>
              <el-table-column prop="count" width="100" sortable label="次序"></el-table-column>
              <el-table-column label="操作" fixed="right" width="180">
                <template slot-scope="scope">
                  <button class="btn_edit" @click="checkDetail(scope.row)">查看详情</button>
                    <button class="btn_add" @click="editDetail(scope.row)" v-if="hasPermission('slope:risk:add')&&form.isQueryHistory==0">编辑</button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
                 :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
              :total="form.total">
            </el-pagination>
          </div>
          <el-drawer
            :title="title"
            :visible.sync="newForm"
            v-if="newForm"
            direction="ltr"
            :key="drawerKey"
            custom-class="demo-drawer"
            ref="drawer"
            size="75%">
            <div class="demo-drawer__content">
              <slope-risk-form ref="dailyPatrol" @submitClose="submitClose"
                                      :isLook="isLook"></slope-risk-form>
            </div>
            <div class="demo-drawer__footer" v-if="sloppeDetailNewForm.form!==null&&!isLook">
              <el-button @click="newForm=false" type="info">取 消</el-button>
              <el-button type="primary" class=" common_btn-defalut" @click="submitDrawer">确 定</el-button>
            </div>
          </el-drawer>
          <!-- 查看大图 -->

        </div>
      </el-col>
    </el-row>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>
<script>
  import slopeRiskForm from "./slppeRiskFormNew";
  import OrganizationTree from '@/components/organization-tree/all'
  import ItemMixins from "../item.mixins";
  import Enums from '@/utils/enums'
  import constUrl from '@/services/env'
  import {sloppeListNew, sloppeDetailNew} from '@/services/model/form';
  import XLoading from '@/components/animation/x-loading.vue'

  export default {
    components: {
      slopeRiskForm,
      OrganizationTree,
      XLoading
    },
    mixins: [ItemMixins,Enums],
    data() {
      return {
        isLoading: false,
        restaurants:[],
        state: '',
        timeout:  null,
        title: '新增边坡工程评分调查表',
        drawerKey: 1,
        newForm: false,
        showDetailTitle: '',
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        constUrl,
        tableList: [],
        deptRoadList: [],
        EnumSlopeRiskLevelList: [],
        currentRow: {},
        EnumMaintenanceInspectionList: [],
        form: {
          page: 1,
          pageSize: 10,
          isQueryHistory: 0,
        },
        detailDrawer: false,
        isLook: true,
        sloppeDetailNewForm:{},
      }
    },
    methods: {
      getSlopeList() {
        if (!this.form.roadId) {
          this.$message('请先选择路线');
          return
        }
      },
      add() {
        this.newForm = true
        this.isLook = false
        this.$nextTick(function () {
          this.$refs.dailyPatrol.getTemplate();
        });
      },
      submitClose() {
        this.drawerKey += 1
        this.newForm = false
        this.queryList()
      },
      submitDrawer() {
        if (this.$refs.dailyPatrol.calculationData.length === 0) {
          this.$message(
            {
              message: '请先计算',
              type: 'warning'
            }
          );
          return
        }
        this.$refs.dailyPatrol.validatorForm()
      },
      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId)
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.$set(this.form, 'roadId', '');
        this.$set(this.form, 'slopeId', '');
        this.queryList()
        this.changeDept()
      }, async checkDetail(row) {
        this.title = '边坡风险评估调查表详情'
        this.isLook = true
        let detail = await sloppeDetailNew({id: row.id})
        this.newForm = true
        detail.data.riskLevel=row.riskLevel
        detail.data.riskLevelName=row.riskLevelName
        this.$nextTick(function () {
          this.$refs.dailyPatrol.getTemplate(detail.data);
        });
      },
      async editDetail(row) {
        this.title = '编辑边坡风险评估调查表'
        this.detailDrawer = true
        this.isLook = false
        let detail = await sloppeDetailNew({id: row.id})
        this.newForm = true
        this.sloppeDetailNewForm=detail.data
        detail.data.riskLevel=row.riskLevel
        detail.data.riskLevelName=row.riskLevelName
        this.$nextTick(function () {
          this.$refs.dailyPatrol.getTemplate(detail.data,'isEdit');
        });
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      async queryList() {
        this.isLoading = true
        let res = await sloppeListNew(this.form)
        this.tableList = res.data?.records || []
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
        this.isLoading = false
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      changeRoad() {
        this.$set(this.form, 'slopeId', '');
        const {deptTreeId, roadId} = this.form
        this.getSelectSlopeList(deptTreeId, roadId)
      },
      // 模糊搜索路线
      querySearchAsync(queryString, cb) {
        var restaurants
        if (!queryString) {
          restaurants = [];
        } else {
          restaurants = this.restaurants;

        }
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 10 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect(item) {
        this.form.roadId = item.id
        this.changeRoad()
      },
      //获取路线列表
      async changeDept() {
        this.deptRoadList = await this.getRoadListByDept(this.form.deptTreeId)
        let data = []
        this.deptRoadList.map(x => {
          data.push({
            id: x.id,
            value: x.name,
            name: x.name
          })
        })
        this.restaurants = data
      },
    },
    mounted() {
      this.queryDictList(['EnumSlopeRiskLevel'], ['EnumSlopeRiskLevelList']);

    },
    activated() {
    },
  }


</script>
<style scoped="scoped" lang="less">
  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        padding: 0px 20px;
      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  /deep/ .demo-drawer {

    .demo-drawer__content {
      height: 90%;
    }

    .demo-drawer__footer {
      bottom: 1%;
    }
  }

  /deep/ .el-drawer__header {
    padding: 15px !important;
  }
</style>
